
<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>拿到的学生姓名是{{ studentName }}</p>
    <School :getSchoolName="getSchoolName" />
    <hr />
    <!-- 给Student的组件实列绑定atm事件 只要atm事件被触发 getStudentName就会被调用  -->
    <!-- <Student v-on:atm="getStudentName" /> -->
    <Student @atm="getStudentName" @m1="demo" @click.native="show" />
    <!-- <Student ref="student" /> -->
  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  components: { Student, School },
  data() {
    return {
      msg: "hellow App",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log(name, "我是App 我收到学校的名字是");
    },
    getStudentName(name, ...params) {
      // console.log(name, "我是App 我收到学生的名字是");
      console.log("学生姓名是", name, params);
      //把拿到的学生姓名设上去 给data数据
      this.studentName = name;
    },
    demo() {
      console.log("m1事件被触发了");
    },
    show() {
      alert("123");
    },
  },
  mounted() {
    //获取sutdent实列
    // setTimeout(() => {
    //绑定自定义事件
    // this.$refs.student.$on("atm", this.getStudentName);
// ---------------------
    // this.$refs.student.$on("atm", () => {
    //   // console.log(name, "我是App 我收到学生的名字是");
    //   console.log("学生姓名是", name, params);
    //   //把拿到的学生姓名设上去 给data数据
    //   this.studentName = name;
    // });
// ------------------------
    // this.$refs.student.$once("atm", this.getStudentName);
    // },1000);
  },
};
</script>

<style scoped>
.blue {
  background: blue;
}
</style>